<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Module</title>
</head>

<body>
  <div>
    <p>由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，
      store 对象就有可能变得相当臃肿。</p>
    <p>为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的
      state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割</p>


    //使用模块后怎么使用状态,a是模块名称,products是模块中state的属性
    <p>获取 {{$store.state.a.products}}</p>
    <p>提交 $store.commit()</p>


    <h1>命名空间</h1>
    <p>默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得
      多个模块能够对同一 mutation 或 action 作出响应。

      如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其
      成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation
      都会自动根据模块注册的路径调整命名</p>
    <p>使用命名空间后使用map方法，第一个参数需要增加模块名称</p>
    <p>...mapState('模块名称',和原来参数一样是对象或者数组)</p>
  </div>
  <script>


  </script>

  <script>
    //主文件
    //将文件 a  b  导入
    import a from 'a'
    import b from 'b'
    export default new Vuex.store({
      modules: {
        a,
        b
      }
    })
  </script>


  <script>
    //文件a
    const state = {
      products: [{
          id: 1,
          title: 'iPhone 11',
          price: 8000
        },
        {
          id: 2,
          title: 'iPhone 12',
          price: 10000
        }
      ]
    }
    const getter = {}
    const mutations = {}
    const actions = {}
    export default {
      //使用命名空间
      namespaced: true,
      state,
      getters,
      mutations,
      actions
    }
  </script>

  <script>
    //文件b
    const state = {}
    const getter = {}
    const mutations = {}
    const actions = {}
    export default {
      //使用命名空间
      namespaced: true,
      state,
      getters,
      mutations,
      actions
    }
  </script>
</body>

</html>